<template>
  <div>
    <h4>发表评论</h4>
    <hr />
    <textarea
      placeholder="请输入要评论的内容（最多120字）"
      maxlength="120"
      v-model="msg2"
    ></textarea>
    <mt-button type="primary" size="large" @click="postMsg" v-model="msg"
      >点击发表</mt-button
    >

    <!-- 评论列表区域 -->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in list" :key="i">
        <div class="cmt-title">
          第{{ i + 1 }}楼 &nbsp; 用户：{{ item.users }} &nbsp; 发表时间：{{
            time | dateFormat("YYYY-MM-DD HH:mm:ss")
          }}
        </div>
        <div class="cmt-body">{{ item.content }}</div>
      </div>
    </div>

    <mt-button type="danger" size="large" plain @click="loadMore"
      >加载更多</mt-button
    >
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      time: new Date(),
      list: [
        { users: "匿名用户", content: "好哈学习，天天向上" },
        { users: "张三", content: "这小猫可真可爱" },
        { users: "李斯", content: "嘻嘻嘻" },
        { users: "王武", content: "第四代和四川队" },
      ],
      msg: "",
      msg2: "",
    };
  },

  methods: {
    loadMore() {
      var arr = [
        { users: "匿名用户", content: "好哈学习，天天向上" },
        { users: "张三", content: "这小猫可真可爱" },
        { users: "李斯", content: "嘻嘻嘻" },
        { users: "王武", content: "第四代和四川队" },
      ];
      this.list = this.list.concat(arr);
    },
    postMsg() {
      if (this.msg2.trim().length <= 0) {
        return Toast({
          message: "请输入评论内容",
          duration: 1000,
        });
      }
      this.list.unshift({ users: "匿名用户", content: this.msg2 });
      this.msg2 = "";
    },
  },
};
</script>

<style scoped>
textarea {
  margin: 0;
  font-size: 14px;
}
.cmt-item {
  margin-top: 10px;
  margin-bottom: 5px;
}
.cmt-title {
  padding-left: 8px;
  font-size: 14px;
  background-color: #ddd;
}
.cmt-body {
  font-size: 14px;
  text-indent: 2em;
}
</style>


 